<template>
    <div class="loadLog">
        <p class="detailLogHeader__lfZlf">导入日志详情</p>
        <div style="margin-bottom: 30px;">
            <div class="row__BSqI6">
                <div class="title__ZPqxe" style="word-break: break-all;">导入时间</div>
                <div class="content__frgxK" style="width: 920px; word-break: break-all;">{{desc.createTime}}</div>
            </div>
            <div class="row__BSqI6">
                <div class="title__ZPqxe" style="word-break: break-all;">导入用户</div>
                <div class="content__frgxK" style="width: 920px; word-break: break-all;">{{desc.account}}</div>
            </div>
            <div class="row__BSqI6">
                <div class="title__ZPqxe" style="word-break: break-all;">导入结果</div>
                <div class="content__frgxK" style="width: 920px; word-break: break-all;">导入{{computedState(desc.data)}}</div>
            </div>
            <div class="row__BSqI6">
                <div class="title__ZPqxe" style="word-break: break-all;">导入详情</div>
                <div class="content__frgxK" style="width: 920px; word-break: break-all;">
                    {{`导入物料清单模版数量为${desc.data.createSuccess || 0}个，
                        创建失败数量为${desc.data.createFail || 0}个，
                        更新成功数量为${desc.data.updateSuccess || 0}个，
                        更新失败数量为${desc.data.updateFail || 0}个。`}}</div>
            </div>
        </div>
        <el-table :data="computedPage" border style="width: 100%"
            :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}"
            :cell-style="{color:'#5a5a5a',fontSize:'12px',fontWeight:400}" v-loading="loading"
            element-loading-text="加载中" element-loading-background="rgba(250, 250, 250, 0.5)"
            element-loading-spinner="el-icon-loading">
            <el-table-column label="失败原因" min-width="400px">
                 <template slot-scope="scope">
                    {{scope.row[enumSet.reason]}}
                </template>
            </el-table-column>
            <el-table-column label="父项产品编号" min-width="200px">
                 <template slot-scope="scope">
                    {{scope.row[enumSet.parentCode]}}
                </template>
            </el-table-column>
            <el-table-column label="子项产品编号">
                 <template slot-scope="scope">
                    {{scope.row[enumSet.childrenCode]}}
                </template>
            </el-table-column>
            <el-table-column label="单位用量">
                 <template slot-scope="scope">
                    {{scope.row[enumSet.unit]}}
                </template>
            </el-table-column>
            <div slot="empty">
                <el-empty :image-size='100'></el-empty>
            </div>
        </el-table>
        <el-pagination v-if="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :page-sizes="[10,20,50,100]" :page-size="pageSize" layout="total, prev, pager, next, sizes"
            :total="total" background>
        </el-pagination>
    </div>
</template>

<script>
    import {
        importLog
    } from '@/api/baseController'
    export default {
        data() {
            return {
                currentPage: 1,
                total: 0,
                pageSize: 10,
                loading: false,
                value: [],
                reasonData: [],
                state: '',
                enumSet:{
                    'reason':'失败原因',
                    'parentCode':'父项产品编号',
                    'childrenCode':'子项产品编号',
                    'unit':'单位用量'
                },
                desc:{
                    createTime:'',
                    account:'',
                    data:{}
                }
            }
        },
        computed: {
            computedState() {
                return (data) => {
                    let state
                    const {
                        createFail,
                        createSuccess,
                    } = data
                    if (createFail && !createSuccess) { 
                        state = '失败'
                    } else if ((createSuccess && !createFail) || (!createSuccess && !createFail)) {
                        state = '成功'
                    }else {
                        state = '部分成功'
                    }
                    return state
                }
            },
            computedPage(){
                return this.reasonData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
            }
        },
        mounted() {
            this.getImportLog({
                page:  this.$route.query.page,
                limit: this.$route.query.limit,
                type: 'BOM'
            })
        },
        methods: {
            //导入日志
            getImportLog(data) {
                this.loading = true
                importLog(data).then(res => {
                    if (res.code == 200) {
                        let currentList = res.data.list[this.$route.query.index]
                        this.reasonData = currentList.reason != null ? currentList.reason : []
                        this.desc.createTime = currentList.createTime
                        this.desc.account = currentList.account
                        this.desc.data = currentList.data
                        this.total = this.reasonData.length
                    }
                    this.loading = false
                })
            },
            //pageSize 改变时会触发
            handleSizeChange(val) {
                this.currentPage = 1
                this.pageSize = val
            },
            //currentPage 改变时会触发
            handleCurrentChange(val) {
                this.currentPage = val
            }
        }
    }
</script>

<style lang="less" scoped>
    .loadLog {
        padding: 0 20px;
        font-family: sans-serif;

        .detailLogHeader__lfZlf {
            margin: 20px 0;
            font-size: 16px;
            color: #1f273d;
        }

        .row__BSqI6 {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            font-size: 12px;

            .title__ZPqxe {
                width: 100px;
                text-align: right;
                margin: 10px 20px 10px 0;
                color: #8e98ae;
            }

            .content__frgxK {
                margin: 10px 0;
            }
        }
    }
</style>